Visa USA Brand Guidelines for the Web 

Version 2 I January 2005 


VISA 



Version 2 I Published: January 2005 


What’s New 

Version 2 of the Visa USA Brand Guidelines for the Web has been 
revised and updated from throughout, including: 

■ New grid dimensions and grid options (page 11) 

■ Updated color choices (page 17) 

■ More sample images (page 26) 

■ Specifications for using the Enhanced Visa Wordmark online (page 48) 

■ New section devoted to graphic elements for the Web (page 50) 

■ More best-practice layouts (page 54) 


Questions or feedback? 

Contact: Jewel Schenone-Wilk 

650-432-3594 

jewel@visa.com 
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■ For more details about the Visa Brand, see page 7. Or visit 
Visabrand.com. 


You have in your hands one of our most valuable assets, 

the Visa® brand. Your work on a Visa USA Web platform, like every 
communication from every department in Visa USA, plays a vital role 
in delivering on our brand promise, whether to Members, merchants, 
strategic partners, consumers or Visa employees. 

It is your job to enhance and protect the Visa brand by successfully 
utilizing the Visa USA Look, Tone and Feel System — the comprehensive 
solution that keeps all Visa USA communications consistent, 
contemporary and competitive. 

The guidelines included here give you all you need to successfully apply 
the Visa USA Look, Tone and Feel System to the Web. Used consistently, 
these guidelines will help you achieve better integration, greater 
cost efficiencies, and the strongest brand impression from your Visa 
communications. 

Integrate these guidelines with the content development guidelines 
established for your specific Visa USA Web platform to fully utilize the 
Visa brand in fulfilling the strategy and goals of your site. 
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■ Visa USA Web Platforms 

The four primary Visa USA Web platforms: 

■ usa.visa.com: Our public site, serving our consumer and business audiences. 

■ Visa Online: Our Member extranet, the single source for Visa USA resources for 
Member financial institutions. 

■ InSite USA: Our internal intranet for Visa USA employees. 

■ Visabrand.com: Our central Visa USA brand resource for anyone developing Visa 
USA communications. 
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To help support the Visa corporate strategy and brand 
platform, keep the following in mind when developing 
work for the Web: 

Whenever possible, align goals and metrics with 
corporate and brand goals and initiatives 

Whenever applicable, ensure that your Web design is 
a reflection of the brand online 



Visit for examples of the Visa brand in 

other media, including TV and print. 


The Visa brand 


is one of the key pillars of the Visa corporate strategy. Along with our 
products, processing and relationships, our brand is essential to strengthening our relevance to consumers 
and merchants, and differentiating us from the competition. 


We have a total commitment to our brand platform. You can support this commitment by appealing to the Visa 
drivers of preference when you develop your Web work. "Drivers of preference" describes the qualities and 
capabilities our audience wants from Visa. The more you fulfill them with your work, the more you’ll enhance 
the Visa brand. 


Visa Brand Platform 


With Visa if I want to, I can. 



Rational drivers 

Emotional drivers 


■ Acceptance 

■ For people like me 


■ Versatility 

■ For everyone 

Drivers 

■ Convenience 

■ Accomplish things 


■ For everyday use 

that matter to me 


■ Security 

■ Innovation 

■ Best for internet use 

■ Brand 1 can trust 
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By supporting the Visa brand tone with your Web design and 

writing you’ll create experiences that resonate with Visa audiences and enhance the Visa brand. The following terms 
describe the Visa brand tone: confident, trustworthy, leader, innovative, smart, inclusive, vibrant. 

General Writing Guidelines 

No matter who the audience, there are a few rules every writer should follow. 

■ Be conversational: Use an accessible, inviting, but non-intrusive style. Imagine speaking the words instead of just 
writing them. 

■ Use an active voice: Address the audience directly, using “you” whenever possible. 

■ Motivate your audience: Messages should be compelling and persuasive. Make an impression. 

■ Be professional: Keep it businesslike, yet friendly. Avoid jargon, and never underestimate or talk down to 
an audience. 

■ Be sensitive to cultural considerations: Be mindful of diverse customs and points of view. 
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I 


The foundation 


of the Visa USA Look, Tone and Feel System is the grid. 


The grid is composed of rectangular units — basic, primary, elemental shapes. Grid units may be combined to 
form larger rectangles where imagery, color and type appear. See examples on the following pages, as well as 
in Best-Practice Page Designs, page 54. 


The grid provides a fundamental structure that is common to all Visa USA Web sites, while also allowing 
flexibility for each site to meet the design and functional needs of its audience. The result is Web sites that 
are different from each other, but easily recognized as members of the same family, so they “feel like Visa." 


Use of the Grid 

On the following pages you’ll find two grid options: 9-column and 10-column. Select one grid option and use it 
consistently throughout your site. Never mix 9- and 10-column grids within one site. 

Both options work well for both content-heavy and/or marketing-driven sites. While there isn’t a dramatic 
difference between the two grid options, the slightly larger grid units of the 9-column grid call more attention 
■ For more examples of pages designed on the Visa grid, see to the grid, and can deliver more punch and a more assertive tone. The 10-column grid can be used to create 

Best-Practice Page Designs, page 54. designs that feel more refined or elegant. 
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Page Dimensions 

The Visa grid dimensions work successfully on virtually every Internet browser in usage today, on both PC and 
Macintosh computers. 


■ For more examples of pages designed on the Visa grid , see 
Best-Practice Page Designs, page 54. 
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I 


■ Follow these exact grid dimensions when creating 
your layouts. 


■ Note: There is no white border around the outside 
of layouts. 


9 Column: Grid Unit and Gutter Measurements 


51 px 
8 px I 



10 Column: Grid Unit and Gutter Measurements 


67 px 8 px 


45 px 
8 px ; 
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9 Column: 746 px x 405 px, 8-px gutters 

The Visa grid comes to life on the Web, providing flexibility to meet virtually all content and navigation 
requirements, and structure that helps identify sites as part of the Visa brand experience. 


■ Individual grid units may be grouped to create larger 
content and navigation areas. 



■ Elements within the larger content and navigation areas 


4 

U 

iH Dun t k 

i nn 


are not required to conform to individual grid units. 
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10 Column: 742 px x 416 px, 8-px gutters 

The Visa grid comes to life on the Web, providing flexibility to meet virtually all content and navigation 
requirements, and structure that helps identify sites as part of the Visa brand experience. 
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Not Permitted 
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Shown here 


is the complete Visa USA color palette for online use. Be sure to follow 
the guidelines for usage on page 19. 


Visa USA Brand Equity Colors 


Equity Blue 


Equity Gold 


Equity White 


Visa USA Brand Accent Colors 


Accent Green I Accent Violet I Accent Red I Accent Black 


Accent Silver 


Visa USA Brand Accent and Equity Colors for Online Only 


Accent Purple 


Accent Gray 
75% 


Accent Gray 
60% 


Accent Gray 
10 % 


Equity Blue 
Tint 75% 


Equity Blue 
Tint 50% 


Equity Blue 
Tint 25% 


Equity Gold 
Tint 75% 


Equity Gold 
Tint 50% 


Equity Gold 
Tint 25% 


Accent Gray 
5% 
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■ Note: Use of Accent Violet should be avoided online, 
as it appears very similar to Equity Blue. Accent Purple (an 
online-only color) should be used instead. 


• For typography color palette and usage, see 
Typography: Color Palette, page 40. 


Visa Equity Colors 

The Visa USA color palette is comprised of Equity Colors and Accent Colors. Equity Colors are Equity Blue, Equity 
Gold and Equity White, and must be the dominant colors in Visa layouts. 

Visa Accent Colors 

Seven Accent Colors are also available and should be used sparingly: Accent Red, Accent Green, Accent Violet, 
Accent Silver, Accent Black, Accent Purple (online only) and Accent Gray (online only). In online layouts small 
amounts of these colors may be used to compliment images, call attention to specific areas, or to act as 
indicators of functionality. 

Tints 

Tints are intended for use in charts and graphs and other instances where a range of slightly different colors 
are required. 


Color Name 

Equity Blue 
| Equity Gold 
Equity White 
| Accent Green 
| Accent Violet 
| Accent Purple (online only) 
| Accent Red 
Accent Silver 
Accent Black 
| Accent Gray 75% 

| Accent Gray 60% 

Accent Gray 10% 

Accent Gray 5% 

| Equity Blue Tint 75% 

Equity Blue Tint 50% 

Equity Blue Tint 25% 

| Equity Gold Tint 75% 
Equity Gold Tint 50% 
Equity Gold Tint 25% 


R 

0 

255 

255 

29 

81 

113 

224 

188 

0 

61 

102 

230 

241 

64 

127 

191 

255 

255 

255 


G 

35 

171 

255 

151 

16 

0 

0 

188 

0 

61 

102 

230 

241 

90 

145 

200 

192 

213 

234 


B 

160 

0 

255 

35 

202 

161 

27 

188 

0 

61 

102 

230 
241 
184 
207 

231 
64 ^ 

127 

191 


HEX 

00 23 aO 
ff ab 00 
ff ff ff 
Id 97 23 
51 10 ca 
71 00 al 
eO 00 lb 
be be be 
00 00 00 
3d 3d 3d 
66 66 66 
e6 e6 e6 
fl fl fl 
40 5a b8 
7f 91 cf 
bf c8 e7 
ff cO 40 
ff d5 7f 
ff ea bf 
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Color Balance 

In the online environment Equity Colors should visually comprise at least 90% of each layout, with Equity White 
dominant. The overall page size (inclusive of scrolling) may be considered part of the page when calculating use of 
color, however, Accent Colors should never be dominant on a screen. 


■ Use color judiciously. Simple color combinations are most 
effective , and will be most likely to gain the response you 
seek in your audience. 


■ Within the grid system , grid units may be filled with color ; 
creating color fields. Grid units may also be combined to 
create larger fields of color. 


• For typography color palette and usage , see 
Typography: Color Palette, page 40. 


Mole&tie Quis Nostrud 


Exercii 


Tation 


Ullamcorper 



VISA 


Lorem ipsum dolor sit amet consectetuer 


Nam liber- temper cum valuta nobis eleifend option congue nihil Lmdiet 
doming id quod rnazim placerat facer passim assum. Lorem ipsum dolor 
sit amet, consectetuer adipiscing el it, sed diam nonummy nibhsmod 
tinadunt ut laoreet doluro mafijip 



Vel autem vel eum iriure 

Hendrerit in ^ulputate velit esse 

Tie consequat vel ilium 

Au feugiat nulla faeihsis at vero eras 

Accumsan et iusto odio 

Aim qui bland it praesent luptatum 
unt ut laoreet dolore magna aliquam 


Nulla faciliai lorem ipsum 

Sit amet, consectetuer adipiscing 

Sed diam nonummy nibh 

Mod tmcidunt ut laoreet dolore 
magria aliquam erat volutpat. 

Dele nit augue duis dolore 

Feugait nulla facilist. Lorem ipsum 


> Autem vel eum iriure 

Endrerit in vulputate velit esse 

> Consequat vel ilium) 

Feugiat nulla facilisis at vero eros 

> Et iusto odio dignissim 

Blandit praesent luptatum 


UtiAisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisi ut aliquip exa oommodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, velrefeugiat nulla facilisis. 
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■ For typography color palette and usage , see 
Typography: Color Palette, page 40. 


■ Visa Equity Blue , Equity Gold , and Equity White should 
visually comprise at least 90% of an overall page. (“90%o” 
refers to the page , not just the portion visible in the 
browser window.) 


■ Tints are intended for use in charts and graphs and other 
instances where a range of slightly different colors are 
required. 


VISA 
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Color Combinations Not Permitted 



Do not place a field of 
Accent Red next to a field 
of Equity Gold. 



Do not use Accent Purple 
next to Equity Gold. 



Do not use Accent Green 
next to Accent Red. 
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Not Permitted 
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Imagery I The Look of Visa USA 



Photography 


not illustration, is used in the Visa USA Look, Tone and Feel System. Use of 
illustration, clip art, or other types of imagery is not permitted. (Exceptions may only be made for instructions or 
diagrams). Visa USA photography is simple, bold, clear, direct, and easily understood. 


Using Images Online 

Follow these guidelines when using images: 

■ Ensure the meaning of images is clear and easy to understand, not clever or ironic. 

■ Choose images carefully. Ask yourself, “What emotion am I seeking to evoke with this image? What, specifically, do 
I want the image to say?” 

■ Ensure that images you select are relevant to your specific Visa USA audience, and that they support and work in 
tandem with the copy that accompanies them. 

■ Use fewer images in Web layouts than in offline layouts. Web pages with large or numerous images take longer to 
load, and can compromise user experience. 

Imagery Style 

Color photography should be bright, fresh, and clear, with an emphasis on Visa Equity colors. If black and white is used 
the images should be high contrast, current and powerfully evocative — never nostalgic or sepia-toned. 

All Visa photography is: 

■ Graphic: striking and iconic, with clean lines and bold shapes 

■ Real: not posed, no manipulated images 

■ Crisp: the focus should be sharp, never blurred 

■ Engaging: friendly and accessible, never trite or overused 

■ Single-image: no montages 

■ Within the grid: contained within the grid element, not split across grid space (the image should not appear to be 
viewed across separate “windows”) 


Imagery Content 

When selecting images, think beyond simply showing people using their card. Look for images that capture the entire 
Visa experience. Image subject matter includes both people and environments. 

These terms describe the Visa imagery you’ll see on the sample image pages: confident, real, approachable, 
life-enhancing, helpful, vital, easy. 
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Stock Photography 

The most typical sources of Visa USA images are stock photography houses, which offer images for review and 
purchase online. Of these, Getty Images (www.gettyimages.com) and Comstock (www.comstock.com) have large image 
databases and provide broad choice. Searches are time consuming; be sure to allot time in your design process for 
finding images that meet Visa USA standards. Also be sure to allot funds in your budget for image usage rights, and be 
prepared to review the terms and conditions of the usage rights. 

Rights-managed stock photography typically offers higher-quality, more unique images; $500 per image is an average 
cost. Royalty-free stock typically costs less, but offers images that are less unique. Both are available at most 
stockhouses. 

The example images on the following pages are drawn from both rights-managed and royalty-free photography databases. 
Numerous descriptive words are provided; use these to help focus your searches. 


Original Photography 

If you know what you’re looking for and would like images you can be sure won’t be seen anywhere else, shooting 
original photography can be a good choice. A well-managed shoot can be accomplished in two to four weeks and give 
you images that tell your story in a more recognizable and impactful way. Cost is not as daunting as you might think, 
when compared with the time required to find the right stock images. 

Photography Usage Rights 

Remember, you cannot use any images without first obtaining (and usually paying for) the usage rights. 
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Examples of images that fulfill Visa USA brand values. 

Confident, Leader, Innovative, Smart, Informative, Intelligent, Expert 
People who are assured and worry-free , places that project clarity and ease. 



Note: These images have not been licensed for use outside this document. Do NOT use these 
images in your designs without first purchasing usage rights from the image owner(s). 
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Examples of images that fulfill Visa USA brand values. 


Real, Trustworthy, Safe, Reliable 

Authentic people , not posed; genuine experiences and places that viewers can 
project themselves into. 









Note: These images have not been licensed for use outside this document. Do NOT use these 
images in your designs without first purchasing usage rights from the image owner(s). 
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Examples of images that fulfill Visa USA brand values. 

Approachable, Connected, Friendly, Warm, Inclusive, Acceptance 
Open, accessible people and places; never superior ; guarded or distant. 



Note: These images have not been licensed for use outside this document. Do NOT use these 
images in your designs without first purchasing usage rights from the image owner(s). 
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Examples of images that fulfill Visa USA brand values. 

Life-enhancing, Freedom, Possibilities, Optimisim, Positive, Aspirational, Choice, 
Exploring, Curiosity 

People envisioning or enjoying life's possibilities , whether alone or with others; 
environments that capture these feelings. 



Note: These images have not been licensed for use outside this document. Do NOT use these 
images in your designs without first purchasing usage rights from the image owner(s). 
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Examples of images that fulfill Visa USA brand values. 

Helpful, Engaged, Collaborative, Ally 

Environments and moments in which people are working together and helping 
each other succeed. 



Note: These images have not been licensed for use outside this document. Do NOT use these 
images in your designs without first purchasing usage rights from the image owner(s). 
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Examples of images that fulfill Visa USA brand values. 

Vital , Vibrant, Dynamic, Bright, Fresh, Current, Energetic 

Active , energetic people and environments; objects that provide examples of and metaphors 
for the life-enhancing freedom Visa provides. 





Note: These images have not been licensed for use outside this document. Do NOT use these 
images in your designs without first purchasing usage rights from the image owner(s). 
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I 


Examples of images that fulfill Visa USA brand values. 

Easy, Simple, Logical, Intuitive, Clear, Direct, Convenient 
People and places that are supportive and make things easier. 



Note: These images have not been licensed for use outside this document. Do NOT use these 
images in your designs without first purchasing usage rights from the image owner(s). 
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Improper Image Usage 



Is the meaning of your image clear? 



Never use posed or impersonal images. 



Images must be clear and in focus. 
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Improper Image Usage (cont.) 



Manipulated photography is not appropriate. 



Photo montages are not appropriate. 
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■ Photography is another way to bring color into layouts. 
Emphasize images with bright , vivid colors that fall within 
the Visa palette. Visa colors and colors in imagery should 
compliment or match each other. 
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■ The central image is successful because it conveys open 
space and solidity. It feels “elemental. ” 


■ Use imagery that references the Visa palette. 
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Improper Image Usage 


■ If the image has a horizontal composition , accommodate it 
in your page layout. 


■ Ensure that the intended meaning of your image comes 
through. The image may convey open space , but when it is 
reduced that meaning is lost. 
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ITC Franklin Gothic & Arial Approved typefaces are available for use online: ITC Franklin Gothic, 

which is used for graphic text, and Arial, used for HTML text. Both are simple, modern typefaces that reinforce 
Visa USA brand values, and offer good readability online. 

ITC Franklin Gothic is available in both Roman and italic styles, and in several weights, allowing maximum 
flexibility. Do not use other styles. 


ITC Franklin Gothic: 

Book — AaBbCcDdl23@$! 

Book Italic — AaBbCcDdl23@$! 

Demi - AaBbCcDdl23@$! 

Demi Italic - AaBbCcDdl23@$ ! 

ITC Franklin Gothic Medium: 

Regular — AaBbCcDdl23@$! 
Regular Italic— AaBbCcDdl23@$! 

Heavy - AaBbCcDdl23@$! 
Heavy Italic - AaBbCcDdl23@$! 


Arial: 

Regular — AaBbCcDd123@&! 
Italic — AaBbCcDdl 23@&! 

Bold — AaBbCcDd123@&! 

Bold Italic — AaBbCcDdl 23@&! 
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Graphic Text (ITC Franklin Gothic) and HTML Text (Arial) 

Aesthetic and Web-programming factors help determine when to use Franklin Gothic and when to use Arial: 

■ Page weight: Page weight requirements vary by project; however, to ensure a download time of less than 
10 seconds on a 56k modem, you should keep page weight below 60k total. Graphic text can increase 
page weight. 

■ Updates: Will the page be updated on a regular basis? If so, you should consider using HTML text. 

■ Feel of the page: Does it look and feel like Visa? If not, consider using more graphic text, giving you greater 
control over the look of the page. (Be careful of compromising download time.) 


Graphic Text 

ITC Franklin Gothic is the required graphic text font in Visa USA Web sites. A graphic must be created for each 
instance where the text is used. The appearance and size of graphic text can be completely controlled, making 
it ideal for larger or more prominent type, such as headlines and subheads. The file size of graphic text 
is determined by the size of the graphic, and can become cumbersome if used extensively, slowing page 
download time. 


HTML Text 


Arial is the default HTML font in Visa USA Web sites, and is used for body copy, headlines, subheads, and/or 
navigation that are updated frequently. Unlike graphic text, which requires that a new graphic be made in the 
event the text is changed, HTML text can be changed or updated easily or automatically, whenever it’s needed 
HTML text may appear different on different computers, with different browsers. HTML text loads much more 
quickly than graphic text. 
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Equity Colors 


Use Equity colors for headlines and other messages you seek to emphasize. If you use Equity Gold, be careful to 
ensure that it is legible. 


EQUITY BLUE 

RGB: RO G35 B160 

Hex: 00 23 aO 


EQUITY GOLD 

RGB: R255 G171 BO 

Hex: FF AB 00 

(Be careful of legibility) 


EQUITY WHITE 


RGB: R255 G255 B255 

Hex: FF FF FF 


Accent Colors 

Accent colors are available for limited use in typography. See Best-Practice Page Design, page 54 for examples. 


ACCENT GREEN 

ACCENT PURPLE 

ACCENT RED 


RGB: 

R29 G151 B35 

RGB: R113 GO B161 

RGB: 

R224 GO B27 


Hex: 

ID 97 23 

Hex: 71 00 al 

Hex: 

EO 00 IB 




(For online use only) 




ACCENT BLACK 

ACCENT GRAY 75% 

ACCENT GRAY 60% 

ACCENT SILVER 

RGB: 

RO GO BO 

RGB: R61 G61 B61 

RGB: 

R102 G102 B102 

RGB: R188 G188 B188 

Hex: 

00 00 00 

Hex: 3d 3d 3d 

Hex: 

66 66 66 

Hex: BC BC BC 

(For large-size type only; be 
careful of legibility.) 
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Body Copy Size and Color 

Arial is the Visa body copy font. Body copy can be no smaller than 11 px, with 12 px recommended. Legal 
copy can be 10 px, or larger. Typically Arial is an HTML font, so it is aliased (as shown here), meaning the text 
does not look at smooth as graphic text. 

Accent Gray 60% is the recommended color for body copy. Accent Gray 75% and Accent Black are also available. 
Select one color for body copy and use it consistently throughout your site. 


Arial 12 px Accent Gray 60% 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed 
diam nonummy nibh euismod 
tincidunt ut laoreet dolore magn. 

Arial 12 px Accent Gray 75% 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed 
diam nonummy nibh euismod 
tincidunt ut laoreet dolore magn. 

Arial 12 px Accent Black 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed 
diam nonummy nibh euismod 
tincidunt ut laoreet dolore magn. 


Arial 11 px Accent Gray 60% 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed 
diam nonummy nibh euismod 
tincidunt ut laoreet dolore magn. 

Arial 11 px Accent Gray 75% 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed 
diam nonummy nibh euismod tin- 
cidunt ut laoreet dolore magn. 

Arial 11 px Accent Black 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed 
diam nonummy nibh euismod 
tincidunt ut laoreet dolore magn. 


Arial 10 px Accent Gray 60% 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed 
diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna 

Arial 10 px Accent Gray 75% 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed 
diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna 

Arial 10 px Accent Black 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed 
diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna 
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Consider Tone and Emphasis 


When selecting a font and a type style you’ll also need to think about what type weight, size and color to use. 
Keep tone and emphasis in mind. 

Tone: 

■ Is the voice loud or soft? Assertive or measured? 

■ Larger type and heavier type weight and color make the voice louder and the tone more assertive 

■ Smaller type and lighter type weight and color make the voice quieter and more measured 

Emphasis: 

■ Using different type size and weight in headlines enables you to highlight parts of the message 


Welcome to Visa Online 


MAKE THINGS HAPPEN 



The Visa brand. 


Get reassurance that only you 

can use your Visa card online. 



In your hands. 


Make the most of your relationship with Visa. 


Capture Your Share of a Fast-Growing Market 


Powerful Incentives with Broad Appeal 
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Type on Background Colors 

White type, at a minimum size of 13 px on Equity Gold and 12 px on Equity Blue, may be used on Visa Equity Color 
backgrounds. In some cases smaller type sizes may be used, but type must remain clearly legible. Compromising 
legibility can undermine the user experience and the Visa brand. 


Arial (HTML Text) 13 px ■ Arial (HTML Text) 12 px 

Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer 

adipiscing elit, sed diam nonummy nibh adipiscing elit, sed diam nonummy nibh 

euismod tincidunt ut laoreet dolore magn. Ill euismod tincidunt ut laoreet dolore magn. 


ITC Franklin Gothic (Graphic Text) 13 px 

Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magn. 


ITC Franklin Gothic (Graphic Text) 12px 

Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magn. 


Text Links 

All Visa USA Web sites use the same colors for text links, rollover text and visited links. 


Link Unvisited 

(Equity Blue) 

RGB: RO G35 B160 

Hex: 00 23 aO 


Link Hover 

(Equity Gold) 

RGB: R255 G171 BO 

Hex: ff ab 00 


Link Visited 

(Accent Purple) 

RGB: R113 GO B161 

Hex: 71 00 al 
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" Using different type size, weight and colors in 
headlines enables you to highlight parts of messages. 


■ Use the grid to determine the placement of type within 
a layout. Use either upper- and lowercase, or all 
uppercase text. Do not use all lowercase. 
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■ Accent colors work well when complimenting color 
in imagery. 


■ Headlines and subheads may be created with graphic 
or HTML text. 
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■ Use correct fonts. 

■ Ensure legibility: Do not use Equity Gold text on Accent 
Purple background. 


■ Ensure legibility: Do not use Accent Gray text on Equity 
Gold background. 


■ Ensure legibility: Do not use Accent Red text on Equity 
Gold background. 


■ Ensure legibility: This white text is too small. 


Improper Usage of Colored Type 



Table of Contents » 





Enhanced Visa Wordmark 



Visa USA Brand Guidelines for the Web I Version 2 I January 2005 


Enhanced Visa Wordmark I Usage and Specifications 


47 



The Enhanced Visa Wordmark consists of the familiar 

Visa logotype (the name “Visa” in stylized, all-upper-case type) and a curved graphic element, the Comet. This 
configuration is fixed and should never be altered, rearranged, distorted or contained in a shape. The Comet 
should never be used separately. 

Usage 

The Enhanced Visa Wordmark can be used: 

■ As the Visa corporate signature on Visa business cards and stationery items 

■ As an introductory and/or a sign-off mark on Member and merchant materials 

■ On premium items and special event materials when representing the Visa organization 

■ As a corporate identifier on Visa presentations and videos 

■ On advertising promoting the organization or the entire family of Visa products and services 

■ When representing the Visa organization in conjunction with a contracted sponsorship or event 

The Enhanced Visa Wordmark can be used alone or combined with the sponsorship mark to form a 
composite logo (see Visabrand.com for details). 

To preserve a consistent image, new designs or marks should not be created to represent parts of the Visa 
organization. A proliferation of marks confuses and dilutes the impact of the Visa identity. 
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Specifications for Online Usage 

Whether working online or offline, be certain to maintain the integrity of the Enhanced Visa Wordmark, by 
providing sufficient clear space when the Wordmark is used near other marks, graphic elements or text. When 
working with a photographic background, create clear space by placing the Enhanced Visa Wordmark on a part 
of the background that is free from distracting elements and that provides sufficient contrast. 

For online usage, slightly less clearspace is required beneath the Wordmark than in offline. To allow correct 
clearspace around the Wordmark, in online designs, draw a rectangle around the Wordmark as indicated by 
the dashed line. Measure the height of the Visa logotype (shown as V'), This measurement, applied around 
the rectangle, equals the clear space around the mark that must be free of all other logos or other graphic 
elements. Note the clearspace beneath the logo is measured from the curve in the Comet, not the lowest 
point of the Comet tail. 
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7 graphic elements, such as icons, buttons, arrows and any other graphic 
symbols, provide consistent visual cues that improve the Web experience by making sites easier to scan and easier 
to use overall. Use of graphic elements should be limited to simple executions that don’t compete with the clean 
aesthetic of the Visa USA Look, Tone and Feel System. 



The elements on the following pages have been approved for use in Visa USA Web sites. In some cases graphic 
elements may be created using HTML. Use graphic elements consistently throughout your site. 

Downloadable Document or Application 
Readable Document or Application 
Printer 

Shopping Cart 
Secure Action 
Help 
Flag 



Arrows and Carets 


> 

► 


o 

> ! 

o 

: 


> 

► 

o 

> 


Dotted Arrows 

► Carets 

Q Circle Carets 

> Arrowheads 
Arrows 
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Lines 



Solid Divider Line 
Colors: Equity White (Line) 

Equity Blue (Background) 

Solid Divider Line 
Colors: Equity White (Line) 

Equity Gold (Background) 



Dotted Divider Line 
Colors: Equity White (Line) 

Equity Blue (Background) 

Dotted Divider Line 
Colors: Equity White (Line) 

Equity Gold (Background) 


Solid Divider Line 
Colors: Accent Silver (Line) 

Equity White (Background) 


Dotted Divider Line 
Colors: Accent Silver (Line) 

Equity White (Background) 


Buttons 


Lorem 


H: 20 px W: Dependent on Text Length 

Font: ITC Franklin Gothic Demi 


Size: 12px 

Colors: Equity Blue (Button) 
Equity White (Text) 


Lorem 


H: 20 px W: Dependent on Text Length 

Font: ITC Franklin Gothic Demi 
Size: 12px 

Colors: Accent Silver (Outline) 

Equity White (Button) 

Equity Blue (Text) 


Ipsumun 


H: 20 px W: Dependent on Text Length 

Font: ITC Franklin Gothic Demi 
Size: 12px 

Colors: Equity Gold (Button) 

Equity White (Text) 


Dolor Hend 


H: 20 px W: Dependent on Text Length 

Font: ITC Franklin Gothic Demi 
Size: 12px 

Colors: Accent Gray 60% (Outline) 
Accent Gray 10% (Button) 
Accent Gray 60% (Text) 


Ipsumun 


H: 20 px W: Dependent on Text Length 

Font: ITC Franklin Gothic Demi 
Size: 12px 

Colors: Equity Gold (Outline) 

Equity White (Button) 

Equity Blue (Text) 


Dolor Hend 


H: 20 px W: Dependent on Text Length 

Font: ITC Franklin Gothic Demi 
Size: 12px 

Colors: Equity Blue (Outline) 

Equity White (Button) 

Equity Blue (Text) 
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In this section you’ll find best-practice 

examples of Visa USA Web page design, from consumer to business, content-focused, to image-focused. 
Use these for inspiration, for reference, to clarify the Visa Web Guidelines, or just to see all that’s possible 
with the Visa brand online. 

You will also find key usability best practices. These important guidelines should be adhered to when developing 
any Visa Web site. 
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■ Imagery does not have to be 
confined to a box. 


■ Charts and graphs make use of 
accent colors. 


■ Icons can make pages easier 
to scan. 
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. Use of the grid need not call 
attention to itself. This layout is 
designed on the grid , but only 
references it in the footer. 
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For a closer look at these 
examples, use the “Zoom ” 
function on Adobe Acrobat. 
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Ensure appropriate space on all 
sides of the Visa logo (the height 
of the "V" in Visa). See page 48. 


When ever possible " touts " 
should reference the grid. 


Pages with dense content 
work successfully within the Visa 
Look, Tone and Feel System. 


Grid units can be used to anchor 
page layouts or call attention to 
specific content. 
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For a closer look at these 
examples, use the “Zoom” 
function on Adobe Acrobat. 
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■ Keylines reference the Visa grid 
without using filled grid units. 


■ Use photography and typography 
that compliment each other. 


■ Layouts can be on the grid without 
obviously referencing the grid. 


■ Design of internal “touts” should 
compliment overall page design. 
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For a closer look at these 
examples, use the “Zoom ” 
function on Adobe Acrobat. 


Table of Contents » 




Visa USA Brand Guidelines for the Web I Version 2 I January 2005 


Best-Practices I Page Design 


57 


WSJ 



m in 4-p bjffU 

■ r.j (1 './ l TTMfWTi 


ESI 

nMEirMd 

d 1 «|-J- ■TikTaTi 


T-.ahi raun d 



Lorem ipsurn dolor sitio dignisim 

Not mi- :um stfali niMflipM DtbDfi [ir>M «m iraiiltrt 

+3 r 1 r-;; rt ni^d raif da:di! l«c»r «ri-=-Hn -sajirn Lcr:n n- : 'i J-i r.- art 
jn-irfL mriKWifr adpurn-j a -IP. \ai diamnin j-nii'rabhCMi- a uh fiy 
PHj: mjv> it- ill r h >a a ■ c- it a I :• rtn cir JuMiickra ¥A*eiyp>S 

hnCIQUfl si nsrf-y i 

LliWHiarm adm ram Kkbw Jrif itEnjdman. |u*a rvgulua asm I rise 

uHra w 


■ Small images make it easier to 
scan pages and can inform users 
of what to expect. 
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■ Pages with dense content 
work successfully within the Visa 
Look, Tone and Feel System. 



Oii-wJPVipJ Hj'W 


n lata^ lid 
■p 

U Pi[MUh 


« k Vu EH -iKh 


Unwltr&lir 7r<iiii © 

qn u ■ | ■ :iA 

_ . i p i 9-atari mjwij il f jlH 


Duis autem vd cum inure 

„Eiarr ipEii infi*- ca ii-r.E-i :-i pfCiimg sih. zcddLUFi 
Ten j-tfTV| r>bh LuiEfVr:-] iaE-dwt iJ ianec-l d'Jsia it. : d r ; -j a n *r m J‘ 
■ ■-■xYpri 1 b'b:i lura u- ita-^riBidikr# TbA^m ailqjKi PHric rCS iT- u 


hiriniVfiinn -H 3i>il- 


BdKlImj 





Tf ■ I ■ E ™ 1 " 

^“■*i -> 
Ipu jtiM 
p isr-B-p 



4 a in Id n -c 

kn -rt 

ft ■« kv 


* 

- / 


pi*l ill sa 

0 Cj*- 


h * »"rP #■ 

Fl*l_ I-]- H 

OftiiMl; 


II W|I [ -ang 
gij IfflM FP"II 

IM«iWi h— ’ 

■ id*. 9-:i « 

& *i C<r* 


I .imm IlIIi.t. -a Ji lu- 


ll in ■ ■ i 





C»i +c ■+^-iH-d+ a 
p-nn. - isl •■n. 

0 !.> P 


n P« ¥» WIMP M 

p^i ii 

0 rtL-SHQ 


ijalkdiLil LasLlriiii J In ioed 

LI-rhl-rtiiH <ahi>-n--uri ni TAha unH 'il-iU 

ilnl > , i 0" P-^ 1 * -a B|B- jl.tJji giisut* ■ l d» I I I IP^NI-P 


For a closer look at these 
examples, use the “Zoom ” 
function on Adobe Acrobat. 
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Use photography and typography 
that compliment each other. 
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■ Using different type size, weight 
and color enables you to highlight 
parts of a message. 
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For a closer took at these 
examples, use the “Zoom ” 
function on Adobe Acrobat. 


Table of Contents » 





Visa USA Brand Guidelines for the Web I Version 2 I January 2005 


Best-Practices I Page Design 


59 


■ Large , dynamic images work well 
in the Visa grid system. 


■ A grid unit can provide a splash 
of color that ties the page 
design together. 



■ Form pages can be designed 
successfully within the Visa Look , 
Tone and Feel system. 


■ Grid units may also be combined 
to create larger fields of color. 


■ Images need not feel constrained 
by the grid system. 
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For a closer look at these 
examples, use the “Zoom ” 
function on Adobe Acrobat. 
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For a closer look at these 
examples , use the “Zoom” 
function on Adobe Acrobat. 
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■ Stacking grid units can help break 
up horizontal page layouts , 
adding energy to page designs. 


■ Lighter colors may be used for 
large type. 
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Wsa color tints work well 
in charts. 
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For a closer look at these 
examples, use the “Zoom ” 
function on Adobe Acrobat. 
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■ Grid units may be combined into 
large fields of color — a solution 
that works best when page 
content is not dense. 
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■ Large amounts of body copy 
works best on white backgrounds. 



For a closer look at these 
examples, use the “Zoom ” 
function on Adobe Acrobat. 
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■ For specifications on using composite 
logos , refer to Visabrand.com. 


■ Accent colors work well when 
complimenting color in imagery. 
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July 


IS Duis Autem Mames liber Lorem 
ipsum congue nihil imperdiet 
doming id quod. 


IS Buis autem ipisc iriure dolor in 
hendrerit in vulputate velite 
molestie consequat 


27 Lit wisi enim ad minim veniam, 
quis no strud exerci tation 
ullamcorper suscipit 


30 Lorem ipsum dolor sit ametn 
sectetuer adipiscing elit, sed 
diam nonummy nibh 


August 


01 Lorem ipsum dolor sit ametn 
sectetuer adipiscing elit, sed 
diam nonummy nibh 


02 Duis Autem Mames liber Lorem 
ipsum congue nihil imperdiet 
doming id quod. 


Salostrud I Tation Vtb&rcl I Bi la me or per I Duia autem 


Litsediam 


Autem vel eum iriure dolor ipsum dolor sit amet dolor sit ame. 
eroset ac cumsaneti end option congue nihil imperdet domin. 


Duis autem vel eum iriure dolor 

Duis autem vel eum iriure dolor in hendrerit quis nostrud 
veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisi. 

Hendrerit 

lin vulputate velit esseat vero eros etinandit praesent luptatum 
ril delenit augue duis dolore te feugait nulla facilisi. 

Dolors eu feuuiat 

Hulla facilisis at vero dasas eroset ac cumsaneti end option 
congue nihil imperdiet doming id quod mazim placerat facer 
apo rolodsi. 

Odio dinnissim uui blandit 

Praeset luptatum ril delenit augue iam nonummy nibh 
euismod teet dolore magna aliquam erat volu lorem as tpat. 


Magna aliquam erat volutpat 

Fuis dolore 

In hendrerit in vulputate velit esse molestie consequat, vel 
illum.Te feugait nulla facilisi adipiscing elit sed diama. 


For a closer look at these 
examples , use the “Zoom” 
function on Adobe Acrobat. 
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Usability 

Following these guidelines will help improve site usability. While not exhaustive, this list does address the 
most important issues in Web design. 

1) Make the purpose of the site clear. 

■ The site’s most important information should be represented at the most prominent position of the 
page— typically the top, center. 

2) Organize information based on user needs instead of corporate structure. 

■ Information should be grouped based on expected user tasks. 

■ Highlight “high-priority” user tasks. 

■ Corporate organizational structures don’t often make sense to users and in most cases should not be 
used to organize information. 

3) Provide clear, consistent and efficient navigation. 

■ Navigation systems should illustrate the structure of sites and should be consistent throughout. 

■ Location and graphic treatment of navigation systems should be the same from page to page (with the 
possible exception of home pages). 

4) Use meaningful graphics and headlines. 

■ Imagery should relate to adjacent copy and/or should illustrate important ideas. 

■ Headlines should clearly and plainly indicate the intent of the copy that follows. 

■ Graphics and headlines should make it easy for users to scan the content of a page and quickly find the 
information that is important to them. 

5) Speak the users’ language. 

■ Use terminology that your intended audience will understand. 

■ Avoid using corporate acronyms and jargon that might be confusing to the average site visitor. 
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6) Organize content intuitively. 

■ Cluster similar types of information together so site visitors can easily scan and find what 
they’re looking for. 

■ Use an “inverted-pyramid” writing style: copy should start broad and become more detailed as readers 
move down the page. 

7) Follow established Internet conventions. 

■ Consistently format links throughout entire sites. Never underline text that is not a link. 

■ Hypertext links should have a visited state to let users know where they’ve been and to help orient them 
in the site. 

■ “Standard” items (search fields, contact us and site map links, logos) should be consistent with current 
Internet best practices. 

8) Establish and follow site-wide conventions. 

■ Labels, icons, graphic buttons and arrows, navigation systems, and other site-wide items should have the 
same meaning and should act the same way throughout entire sites. 

9) Follow the 10-second rule. 

■ Users should not have to wait more than 10 seconds for any screen to load. 

■ On a 56k modem, pages of approximately 60k can load in 10 seconds. 

■ For load times greater than 20 seconds a status indicator should be provided. 

10) Provide visual cues and feedback for actionable items. 

■ Whenever practical, use “hover’ attribute for hypertext links and roll-overs for graphic items on which users 
are intended to click. 

■ Hypertext links, graphic buttons, and other clickable items should always appear to be clickable. 
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11) Make the most important information on a page visible without scrolling. 

■ Essential information should be “above the fold” when viewed at the intended user’s lowest screen 
resolution (typically 800 x 600). 


12) Ensure that HTML window titles can stand alone. 

■ Use logical and clear HTML window titles that make sense as independent bookmarks and search 
result headlines. 


13) Pop-up windows should be avoided. 

■ “Pop-up killer” software is increasingly used, and means that your audience may never see information 
presented in pop-up windows. 

■ Pop-up windows are suited to providing information supplemental to the main browser window and/or to 
providing additional information during an “un-interruptible process” (ex: help screens needed during an 
online transaction). However, even these uses should be avoided if possible, due to “pop-up killers." 

■ If used, pop-up windows should always be smaller than the main browser window so they don’t fill the 
screen, thus trapping and confusing users. 


14) Use of Flash should not compromise the user experience. If Flash is being used, keep the following in 

mind: 

■ Flash should not be used unless it is likely that the intended audience already has the Flash plug-in 
installed. If flash is used, a non-flash alternative (NOT “Flash plug-in is required to view this site”) should be 
provided for users who arrive at the site without the plug-in installed. 

■ Use of Flash should not impede users’ ability to bookmark pages (for pages that users might want to 
bookmark). Given that users cannot bookmark pages within a Flash execution, entire sites or parts thereof 
should not be created in Flash unless it is highly unlikely that users will not need to bookmark any pages 
within that execution. 

■ Use of Flash should not delay users’ ability to take action. All actionable items within a Flash execution 
should be visible and users should have enough information to take action almost instantaneously after a 
page has loaded. 

■ Use of Flash should not impede users’ access to important information. The key messages in a Flash 
execution should be visible almost instantaneously after a page has loaded. 
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15) Provide file type, size and date information for downloadable files. 

■ Recommended format: Example Downloadable File (DOC - 32KB - 6/10/2005) 

16) Search: a rule of thumb is to provide search on any site that has more than 100 pages. 

■ The search field should be accessible from every page on the site. 

■ Search results should have clear headlines and descriptive summaries. 

17) Avoid creating content areas that look like banners or other types of ads. 

■ Users tend to scan over information that looks like advertising. 

18) Use of frames in site design is not recommended. 

■ Users are not able to bookmark pages within framed sites. 

■ Sites utilizing frames often have performance and usability problems. 
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